<template>
	<div class="body">
		<div class="search">
			<!-- 鎼滅储鏍-->
			<div class="back">
				<router-link to="/mobile/home">
					<div style="font-size: 1.5rem;">返回</div>
				</router-link>
			</div>
			<div class="search_good">
				<p><input placeholder="输入完整的书名" v-model="ooo" /></p>
			</div>
			<div>
				<button style="margin-top: 17px;margin-left: 10px;" @click="btn()">
					搜索
					<!-- <router-link :to="`/mobile/bookdetail/${id}`" v-if="id!=0">
					</router-link> -->
				</button>

			</div>
		</div>
		<div style="height: 30px; background-color: #A68B5B;"></div>

		<div class="historySearch" style="display: flex; " v-for="item in histories">
			<div>
				<button @click="qqq(item)">{{item}}</button>
			</div>
		</div>
		<div class="hotSearch" style="display: flex; " v-for="(item,index) in Sales" v-if="index<=4">
			<div>
				<button @click="qqq(item.name)">{{item.name}}</button>
			</div>
		</div>
		<div class="recommend">
			<div class="nav">
				<button @click="getTopSale()">人气榜</button>
				<button @click="getTopByHot()">销量榜</button>
			</div>
			<div class="Top1-3">
				<div>
					<router-link :to="`/mobile/bookdetail/${Top1.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${Top1.pic}`" />
					</router-link>
				</div>
				<div>
					<router-link :to="`/mobile/bookdetail/${Top2.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${Top2.pic}`" />
					</router-link>
				</div>
				<div>
					<router-link :to="`/mobile/bookdetail/${Top3.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${Top3.pic}`" />
					</router-link>
				</div>
			</div>
			<div class="Top4-10">
				<table class="listTab4-10">
					<tr v-for=" (item,i) in Sales" style="background-color: #A68B5B; width: 100%;">
						<td>
							<router-link :to="`/mobile/bookdetail/${item.id}`">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
							</router-link>
						</td>
						<td>
							<router-link :to="`/mobile/bookdetail/${item.id}`">
								<div style="color: white;">{{item.name}}</div>
							</router-link>
						</td>
						<td>{{item.price}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'goodSearch',
		data() {
			return {
				id: -1,
				Top1: {pic:'',id:0},
				Top2: {pic:'',id:0},
				Top3: {pic:'',id:0},
				Sales: [],
				ooo: '',
				histories: [],
				books: [],
			}
		},
		methods: {
			btn() {
				if (this.ooo != '') {
					this.histories.push(this.ooo);
				}
				console.log(this.ooo)
				this.books.forEach((item) => {
					if (this.ooo == item.name) {
						this.id = item.id;
						console.log(this.id)
						console.log(item.name);
						console.log(2353);
					}
				})
		this.ooo = '';
		this.$router.push("/mobile/bookdetail/"+this.id)
		this.id =0;
	},
	qqq(name){
		this.books.forEach((item) => {
					if (name == item.name) {
						this.id = item.id;
						console.log(this.id)
						console.log(item.name);
						console.log(2353);
					}
				})
		this.ooo = '';
		if(this.id!=-1){
			this.$router.push("/mobile/bookdetail/"+this.id)
		}
		
		this.id =-1;
	},
	getTopSale() {
			this.Top1 = {};
			this.Top2 = {};
			this.Top3 = {};
			this.Sales = [];
			this.$axios.get("http://127.0.0.1/api/public/book/findTopSale/15").then((resp) => {
				console.log(resp)
				resp.data.data.forEach((item, i) => {
					if (i == 0) {
						this.Top1.pic = item.pic
						this.Top1.id = item.id
					}
					if (i == 1) {
						this.Top2.pic = item.pic
						this.Top2.id = item.id
					}
					if (i == 2) {
						this.Top3.pic = item.pic
						this.Top3.id = item.id
					}
					if (i > 2) {
						this.Sales.push(item);
					}
				})
			})
			console.log(this.Sales);
		},
		getallbook() {
			this.$axios.get("http://127.0.0.1/api/public/findPageBook/1/15/0").then((resp) => {
				console.log(resp)
				resp.data.data.books.forEach((item, i) => {
					this.books.push(item);
				})
			})
		},


	},
	mounted() {
		this.getTopSale();
		this.getallbook();
	}
	}
</script>

<style>
	.listTab4-10 img {
		width: 35px;
	}

	.listTab4-10 {
		width: 100%;
	}

	.Top4-10 {
		width: 100%;
	}

	.Top1-3 {
		display: flex;
		width: 100%;
	}

	.Top1-3 img {
		margin-left: 30px;
		width: 60px;
	}

	.nav button {
		margin-left: 20%;
		border: none;
	}

	.recommend {
		background-color: navajowhite;
	}

	.hotSearch {
		margin-top: 30px;
	}

	.hot {
		margin-top: 10px;
	}

	.history {
		margin: 10px;
	}

	.history td {
		background-color: #A68B5B;
		border-radius: 7px;
		width: 60px;
	}

	.hot td {
		border-radius: 7px;
		width: 60px;
	}

	.body {
		width: 100%;
		margin: 0px;
		padding: 0px;

	}

	.search {
		display: flex;
		background-color: #f7f7f7;
	}

	.search p {
		font-size: 30px;
		margin-left: 40px;
	}

	.search input {
		border-radius: 7px;
		border: none;
	}
</style>
